<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script type="text/javascript" src="{:asset('js/jquery.min.js')}"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=<?php echo $field['setting']['api_key']; ?>"></script>
    <title>地图标记</title>
    <style type="text/css">
        body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
        #search_bar {
            position: absolute;
            top: 10px;
            left: 10px;
        }
        #search_bar .search_input{
            width: 200px;
            height: 20px;
            line-height: 20px;
        }
        #search_bar #search_btn{
            border: 0;
            color: #FFF;
            width: 77px;
            height: 24px;
            background-position: 0 0;
            margin-right: 5px;
            cursor: pointer;
            background: #06C;
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <div id="allmap"></div>
    <div id="search_bar">
        <input type="text" class="search_input" id="suggestId" style="width:150px;" />
        <input type="button" name="search" value="搜索" id="search_btn">
    </div>

    <script type="text/javascript">
        // 百度地图API功能
        var map = new BMap.Map("allmap",{minZoom:4,maxZoom:15});
        var marker;

        <?php if(!empty($_GET['point'])) { list($longitude , $latitude) = explode(',', $_GET['point']); ?>
            var default_point = new BMap.Point(<?php echo $longitude; ?>, <?php echo $latitude; ?>);
            map.centerAndZoom(default_point, 14);

            marker = new BMap.Marker(default_point);
            map.addOverlay(marker);
        <?php } else { ?>
            map.centerAndZoom("<?php echo $field['setting']['defaultcity']; ?>", 14);
        <?php } ?>

        map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT}));
        map.addEventListener("click", function(e) {
            if (marker) {
                map.removeOverlay(marker);
            };

            var point = new BMap.Point(e.point.lng, e.point.lat);
            marker = new BMap.Marker(point);
            map.addOverlay(marker);
            map.panTo(point);
            var main_iframe = $('#rightMain', window.parent.document);
            $("#<?php echo $field['field']; ?>", main_iframe.contents()).val(e.point.lng + ", " + e.point.lat);
        });

        $("#search_btn").bind("click", function(){
            if ($("#search_bar .search_input").val()) {
                search_location();
            };
        });

        $("#search_bar .search_input").bind("keydown", function(event) {
            if ($("#search_bar .search_input").val()) {
                if ( event.which == 13 ) {
                    search_location();
                }
            }
        });

        function search_location() {
            $location = $("#search_bar .search_input").val();
            var local = new BMap.LocalSearch("<?php echo $field['setting']['defaultcity']; ?>", {
                renderOptions: {
                    map: map,
                    autoViewport: true,
                    selectFirstResult: true
                },
                pageCapacity: 3
            });
            local.search($location);
        }
    </script>
</body>
</html>